<template>
    <div class="body">
        <page-aside icon="icon-zaixianwenzhen" title="医学知识图谱" desc="构建全面医学知识体系，助您精准医疗决策。">
            <template #interact>
                <span class="input-label">搜索症状：</span>
                <div class="input-container">
                    <input class="input-box" placeholder="输入症状名称……" v-model="symKeyword">
                </div>
                <span class="input-label">搜索药品：</span>
                <div class="input-container">
                    <input class="input-box" placeholder="输入药品名称……" v-model="medKeyword">
                </div>
                <el-button @click="changeMsg" class="search-btn" type="info" size="large">查询</el-button>
            </template>
        </page-aside>
        <div class="graph-container">
            <div class="graph-component">
                <neo4j-chart :nodes="nodes" :links="links" />
            </div>
        </div>
    </div>
</template>

<script setup>
import PageAside from '../components/PageAside.vue';
import Neo4jChart from '../components/Neo4jChart.vue';
import neo4jRequest from '../utils/neo4jRequest';
import { onMounted, ref } from 'vue';  

let nodes = ref([
    { id: "1", name: '暂未查到数据', describe: '暂未查到数据' },
]);
let links = ref([
    { source: "1", target: "2", type: 'Link Type' },
]);
let medKeyword = null;
let symKeyword = null;

function changeMsg() {
    if(symKeyword!=null) {
        changeSym();
    } else if(medKeyword!=null) {
        changeMed();
    } else {
        changeAll();
    }
}

function changeSym() {
    neo4jRequest.get("neo4j/findSymptomRelationShips/" + symKeyword).then(res => {
        if (res.code === 200) {
            nodes.value = res.data.node;
            links.value = res.data.path;
        } else {
            alert("查询症状图谱失败");
        }
    })
};

function changeMed() {
    neo4jRequest.get("neo4j/findMedicineRelationShips/" + medKeyword
    ).then(res => {
        if (res.code === 200) {
            nodes.value = res.data.node;
            links.value = res.data.path;
        } else {
            alert("查询药品图谱失败")
        }
    })
};

function changeAll() {
    neo4jRequest.get("neo4j/findAllRelationShips"
    ).then(res => {
        if (res.code === 200) {
            nodes.value = res.data.node;
            links.value = res.data.path;
        } else {
            alert("查询药品图谱失败")
        }
    })
}

onMounted( () => {
    changeAll();
}) 
</script>

<style scoped>
.body {
    height: 95vh;
    display: flex;
}

.input-label {
    color: rgba(255, 255, 255, 1);
    font-family: Inter;
    font-weight: Medium;
    font-size: 20px;
    text-align: center;
    margin: 10px 0;
}

.input-container {
    margin: 20px 0;
    width: 100%;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    border-radius: 50px;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.15000000596046448);
    overflow: hidden;
}

.input-box {
    border: none;
    padding: 20px;
    outline: none;
    font-size: 16px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.input-box::placeholder {
    color: rgba(233, 82, 88, 1);
    /* 设置 placeholder 的颜色 */
    font-family: Inter;
    /* 设置 placeholder 的字体 */
    font-weight: Medium;
    /* 设置 placeholder 的字体粗细 */
    font-size: 14px;
    /* 设置 placeholder 的字体大小 */
}

.search-btn {
    width: 100%;
    font-size: 20px;
    margin: 20px 0;
}

.graph-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.graph-component {
    width: 60vw;
    height: 580px;
    opacity: 1;
    position: relative;
    border-radius: 20px;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.10000000149011612);
    overflow: hidden;
}
</style>